import React, { Component } from "react";
import "./pay.scss";
import { NavBar, Icon } from "antd-mobile";
import myAxios from "../../utils/myAxios";
import empty_product from "../../assets/images/empty_product.jpg";
export default class Pay extends Component {
  state = {
    goodlists: [],
  };
  toDetailClick = (goods_id) => {
    this.props.history.push("/goodsDetail/" + goods_id);
  };

  componentDidMount() {
    myAxios
      .get("goods/search", {
        params: {
          cid: "6",
        },
      })
      .then((res) => {
        console.log(res);
        this.setState({
          goodlists: res.goods, // 追加数据
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }
  render() {
    return (
      <div className="app-pay">
        <NavBar
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.back(1)}
          className="pay-con"
        >
          支付
        </NavBar>
        {/* 地址 */}
        <div className="pay-selectAddress">
          <div className="address">选择地址</div>
        </div>
        {/* 已选商品 */}
        <div className="selectedGoods">
          <div className="goods-title">已选商品</div>
          <div className="goods-list">
            {this.state.goodlists.map((v) => {
              return (
                <div
                  className="list-item"
                  key={v.goods_id}
                  // 通过传参，还可以通过属性传值
                  onClick={this.toDetailClick.bind(this, v.goods_id)}
                >
                  <div className="item-img">
                    <img
                      src={
                        v.goods_small_logo ? v.goods_small_logo : empty_product
                      }
                      alt=""
                    />
                  </div>
                  <div className="item-text">
                    <div className="text-title">{v.goods_name}</div>
                    <div className="text-price">￥{v.goods_price}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        {/* 底部 */}
        <div className="pay-bottom">
          <div className="bottom-allPrice">
            <span className="all">合计：</span>
            <span className="price">￥51735</span>
          </div>
          <div className="bottom-pay">
            去支付<span>(17)</span>
          </div>
        </div>
      </div>
    );
  }
}
